<template>
  <div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            placeholder="通过显示行任意列名称模糊搜索,记得回车哦..."
            clearable
            @change="keywordsChange"
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="searchEmp"
            prefix-icon="el-icon-search"
            v-model="keywords">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchEmp">搜索
          </el-button>
          <el-button slot="reference" type="primary" size="mini" style="margin-left: 5px"
                     @click="showAdvanceSearchView"><i
            class="fa fa-lg" v-bind:class="[advanceSearchViewVisible ? faangledoubleup:faangledoubledown]"
            style="margin-right: 5px"></i>高级搜索
          </el-button>
        </div>
        <div style="margin-left: 5px;margin-right: 20px;display: inline">
          <el-upload
            :show-file-list="false"
            accept="application/vnd.ms-excel"
            action="/statistics/basic/importEmp"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError" :disabled="fileUploadBtnText=='正在导入'"
            :before-upload="beforeFileUpload" style="display: inline">
            <el-button size="mini" type="success" :loading="fileUploadBtnText=='正在导入'"><i class="fa fa-lg fa-level-up"
                                                                                          style="margin-right: 5px"></i>{{fileUploadBtnText}}
            </el-button>
          </el-upload>
          <el-button type="success" size="mini" @click="exportEmps"><i class="fa fa-lg fa-level-down"
                                                                       style="margin-right: 5px"></i>导出数据
          </el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <transition name="slide-fade">
            <div  style="margin-bottom: 10px;border: 1px;border-radius: 5px;border-style: solid;padding: 5px 0px 5px 0px;box-sizing:border-box;border-color: #20a0ff" v-show="advanceSearchViewVisible">
              <el-row>
              <el-col :span="4">
                局点名称:
                <el-input clearable style="width: 130px" size="mini" v-color="color"  type="text"
                placeholder="请输入局点名称"
                v-model="unitname"></el-input>
              </el-col>
              <el-col :span="4">
                设备名称:
                <el-input  clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入设备名称"
                          v-model="sysname"></el-input>
              </el-col>
              <el-col :span="4">
                设备端口:
                <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入设备端口"
                          v-model="portid"></el-input>
              </el-col>
              <el-col :span="4">
                电路编号:
                <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入电路编号"
                          v-model="circuitcode"></el-input>
              </el-col>
              <el-col :span="5">
                端口状态:
                <el-radio-group v-model="emp.portstatus">
                  <el-radio label="开通">开通</el-radio>
                  <el-radio style="margin-left: 15px" label="未开通">未开通</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span="4">
                  入口速率:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="入口速率"
                            v-model="inspeed"></el-input>
                </el-col>
                <el-col :span="4">
                  出口速率:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="出口速率"
                            v-model="outspeed"></el-input>
                </el-col>
                <!--
                <el-col :span="8">
                  用户注释:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="用户注释"
                            v-model="userdec"></el-input>
                </el-col>-->
              </el-row>

              <el-row justify="start">
                <el-col :span="5">
                  资源局点名称:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入局点名称"
                            v-model="zunitiname"></el-input>
                </el-col>
                <el-col :span="5">
                  资源设备名称:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入设备名称"
                            v-model="zusername"></el-input>
                </el-col>
                <el-col :span="5">
                  资源电路编号:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入电路编号"
                            v-model="zcircuitcode"></el-input>
                </el-col>
                <el-col :span="5">
                  资源系统速率:
                  <el-input clearable style="width: 120px" size="mini" v-focus v-color="color"    placeholder="入口速率"
                            v-model="zspeed"></el-input>
                </el-col>
                <el-col :span="4">
                  端口状态:
                  <el-radio-group v-model="emp.zstatus">
                    <el-radio label="开通">开通</el-radio>
                    <el-radio style="margin-left: 15px" label="未开通">未开通</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span="5" :offset="4">
                  <el-button size="mini" @click="cancelSearch">取消</el-button>
                  <el-button icon="el-icon-search" type="primary" size="mini" @click="searchEmp">搜索</el-button>
                </el-col>
              </el-row>
            </div>
          </transition>
          <el-table
            :data="emps"
            v-loading="tableLoading"
            border
            stripe
            @selection-change="handleSelectionChange"
            size="mini"
            style="width: 100%" :row-style="Highlight" >
            <el-table-column
              type="selection"
              align="left"
              width="30">
            </el-table-column>
            <el-table-column
              prop="circuitcode"
              show-overflow-tooltip="true"
              align="left"
              fixed
              label="电路编号"
              width="110">
            </el-table-column>
            <el-table-column
              prop="zcircuitcode"
              width="110"
              align="left"
              show-overflow-tooltip="true"
              label="资源系统的电路编号">
            </el-table-column>
            <el-table-column
              width="80"
              align="left"
              prop="portstatus"
              label="端口状态">
            </el-table-column>
            <el-table-column
              prop="zstatus"
              align="left"
              width="85"
              label="资源系统的状态">
            </el-table-column>
            <el-table-column
              prop="inspeed"
              width="70"
              label="入口速率">
            </el-table-column>
            <el-table-column
              prop="zspeed"
              width="90"
              align="left"
              label="资源系统的速率">
            </el-table-column>
            <el-table-column
              width="90"
              align="left"
              label="对比结果（不同点）">
              <template slot-scope="scope">
                <span v-if="scope.row.resulttype=='0'" :style="{'color':scope.row.resulttype=='0'? 'red':'#333'}" >
               一致
                </span>
                <span v-if="scope.row.resulttype=='1'">
                 速率不同
                </span>
                <span v-if="scope.row.resulttype=='12'" > 速率状态均不同</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sysname"
              width="260"
              align="left"
              show-overflow-tooltip="true"
              label="设备名称">
            </el-table-column>
            <el-table-column
              prop="unitname"
              width="200"
              show-overflow-tooltip="true"
              align="left"
              label="局点名称">
            </el-table-column>
            <el-table-column
              prop="userdec"
              width="280"
              show-overflow-tooltip="true"
              label="用户注释">
            </el-table-column>
            <el-table-column
              width="100"
              prop="zunitiname"
              show-overflow-tooltip="true"
              label="资源系统的局点名称">
            </el-table-column>
            <el-table-column
              prop="zusername"
              width="250"
              align="left"
              show-overflow-tooltip="true"
              label="资源系统的电路名称">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="80">
              <template slot-scope="scope">
                <el-button type="danger" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini"    @click="deleteEmp(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
            <div style="display: flex;justify-content: space-between;margin: 2px">
            <el-button type="danger" size="mini" v-if="emps.length>0" :disabled="multipleSelection.length==0"    @click="deleteManyEmps">批量删除
            </el-button>
            <el-pagination
              background
              :page-size="15"
              :current-page="currentPage"
              @current-change="currentChange"
              layout="total,prev, pager, next, jumper"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        emps: [],
        keywords: '',
        unitname: '',
        sysname: '',
        portid: '',
        portstatus: '',
        circuitcode: '',
        inspeed: '',
        outspeed: '',
        userdec: '',
        zunitiname: '',
        zusername: '',
        zcircuitcode: '',
        zspeed: '',
        zstatus: '',
        resulttype: '',
        fileUploadBtnText: '导入数据',
        beginDateScope: '',
        faangledoubleup: 'fa-angle-double-up',
        faangledoubledown: 'fa-angle-double-down',
        dialogTitle: '',
        multipleSelection: [],
        depTextColor: '#c0c4cc',
        totalCount: -1,
        currentPage: 1,
        tableLoading: false,
        advanceSearchViewVisible: false,
        emp: {
          keywords: '',
          unitname: '',
          sysname: '',
          portid: '',
          portstatus: '',
          circuitcode: '',
          inspeed: '',
          outspeed: '',
          userdec: '',
          zunitiname: '',
          zusername: '',
          zcircuitcode: '',
          zspeed: '',
          zstatus: '',
          resulttype: '',
        },
        rules: {
          portstatus: [{required: true, message: '必填:端口状态', trigger: 'blur'}],
          zstatus: [{required: true, message: '必填:端口状态', trigger: 'blur'}]
        }
      };
    },
    mounted: function () {
      this.initData();
      this.loadEmps();
    },
    methods: {
      Highlight({row, rowIndex}){
        if(row.resulttype=='1'){
          return{
            "color":"red"
            }
        }
      },
      fileUploadSuccess(response, file, fileList){
        if (response) {
          this.$message({type: response.status, message: response.msg});
        }
        this.loadEmps();
        this.fileUploadBtnText = '导入数据';
      },
      fileUploadError(err, file, fileList){
        this.$message({type: 'error', message: "导入失败!"});
        this.fileUploadBtnText = '导入数据';
      },
      beforeFileUpload(file){
        this.fileUploadBtnText = '正在导入';
      },
      exportEmps(){
        window.open("/statistics/basic/exportEmp", "_parent");
      },
      cancelSearch(){
        this.advanceSearchViewVisible = false;
        this.emptyEmpData();
        this.unitname= '';
        this.sysname= '';
        this.portid= '';
        this.portstatus= '';
        this.circuitcode= '';
        this.inspeed= '';
        this.outspeed= '';
        this.userdec= '';
        this.zunitiname= '';
        this.zusername= '';
        this.zcircuitcode= '';
        this.zspeed= '';
        this.zstatus= '';
        this.resulttype= '';
        this.loadEmps();
      },
      showAdvanceSearchView(){
        this.advanceSearchViewVisible = !this.advanceSearchViewVisible;
        this.keywords = '';
        if (!this.advanceSearchViewVisible) {
          this.emptyEmpData();
          this.beginDateScope = '';
          this.loadEmps();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteManyEmps(){
        this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ",";
          }
          this.doDelete(ids);
        }).catch(() => {
        });
      },
      deleteEmp(row){
        this.$confirm('此操作将永久删除[' + row.unitname + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
        });
      },
      doDelete(ids){
        this.tableLoading = true;
        var _this = this;
        this.deleteRequest("/statistics/basic/emp/" + ids).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.loadEmps();
          }
        })
      },
      keywordsChange(val){
        if (val == '') {
          this.loadEmps();
        }
      },
      searchEmp(){
        this.currentPage =1; //注意，一定要重置下，否则会存在问题；
        this.loadEmps();
      },
      currentChange(currentChange){
        this.currentPage = currentChange;
        this.loadEmps();
      },
      loadEmps(){
        var _this = this;
        this.tableLoading = true;
        this.getRequest("/statistics/basic/emp?page=" + this.currentPage + "&size=15&keywords=" +this.keywords +
        "&unitname=" + this.unitname + "&sysname=" + this.sysname + "&portid=" + this.portid + "&portstatus=" + this.emp.portstatus + "&circuitcode=" + this.circuitcode + "&inspeed=" + this.inspeed + "&outspeed=" + this.outspeed+ "&userdec=" + this.userdec+ "&zunitiname=" + this.zunitiname+ "&zusername=" + this.zusername+ "&zcircuitcode=" + this.zcircuitcode+ "&zspeed=" + this.zspeed+ "&zstatus=" + this.emp.zstatus+ "&resulttype=" + this.resulttype).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.emps = data.emps;
            _this.totalCount = data.count;
//            _this.emptyEmpData();
          }
        })
      },
      initData(){
        var _this = this;
        this.getRequest("/statistics/basic/basicdata").then(resp=> {
          if (resp && resp.status == 200) {
            var data = resp.data;
          }
        })
      },
      emptyEmpData(){
        this.emp = {
          unitname: '',
          sysname: '',
          portid: '',
          portstatus: '',
          circuitcode: '',
          inspeed: '',
          outspeed: '',
          userdec: '',
          zunitiname: '',
          zusername: '',
          zcircuitcode: '',
          zspeed: '',
          zstatus: '',
          resulttype: ''
        }
      }
    }
  };
</script>
<style>
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
